<template>
	
	<view >
		<view class="">
			<u-tabs :list="cateList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="recommend-list box-card box-card-new"  v-if="lists && lists.length > 0">
			<view class="shop-list">
				<view class="shop-item"  v-for="(item,index) in lists" :key="item.id" @click="Gotoinfo(item.id)">
					<image class="shop-item-img"  :src="item.image"></image>
					<view class="shop-item-info">
						<text class="shop-item-title text-1-row">{{item.title}}</text>
						<view class="shop-item-info-row">
							<view class="star">
								<image 
								  v-for="(n, index) in item.fullStars" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/xzpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
								
								<image 
								  v-if="item.halfStar" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/ybpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
							   
								<image 
								  v-for="(n, index) in item.emptyStars" 
								  :key="index" 
								  src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/wzpf.png" 
								  mode="widthFix" 
								  style="width: 24rpx; height: 24rpx;">
								</image>
								
								<view class="pfsp">
									{{item.star}}
								</view>
							</view>
							
							<text class="shop-item-info-distance" v-if="item.distance">{{item.distance}}</text>
						</view>
						<text class="shop-item-address text-1-row">{{item.address}}</text>
						<view class="quan">
							<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/quan.png" mode="" style="width: 100%;height: 100%;"></image>
							<view class="quansp">
							
								{{item.quan_money}}
							</view>
						</view>
					</view> 
				</view>
			</view>
		</view> 
		<u-loadmore :status="status" style="width: 100%;text-align: center;"/>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:'',
				cateList: [],
				location:{},
				data:'',
				lists:'',
				sort: '',
				page: 1,
				pagesize: 10,
				status: 'loadmore',
				shoptype_id: '',
			}
		},
		onLoad(option) {
			let that = this
			const item = JSON.parse(decodeURIComponent(option.item));   
		    this.location = {
				lat: item.lat,
				lng: item.lng
			}
			this.shoptype_id = item.shoptype_id,
			this.getStoreList()
		},
		onReachBottom() {
			this.status = 'loading';
			this.page++;
			this.getStoreList()
		},
		methods:{
			Gotoinfo(id){
				uni.navigateTo({
					url:`../../pages/shop/detail?id=${id}`
				})
			},
			change(index) {
				this.current = index;
				let that = this
				let obj = {
					shoptype_id:this.cateList[index].shoptype_id,
					...this.location
				}
				this.$u.api.index.getStoreList(obj).then(req =>{
					if(req.code == 200){
						that.recommend = req.data
						 
						that.recommend.list.forEach(category => {
						   category.fullStars = Math.floor(category.star);
						   category.hasHalfStar = category.star % 1 >= 0.1;
						   category.emptyStars = 5 - category.fullStars - (category.hasHalfStar ? 1 : 0);
						});
						that.lists = that.recommend.list
					}
				})
			},
			getStoreList(){
				let that = this
				let params = {
					sort: that.sort,
					page: that.page,
					pagesize: that.pagesize,
					lng: that.location.lng,
					lat: that.location.lat,
					shoptype_id: this.shoptype_id
				}
				
				that.$u.api.index.getStoreList(params).then(res =>{
					if(res.code == 200){
						that.lists = [...that.lists,...res.data]
						if(res.data.length == 0){
							that.status = 'nomore'
						}
						that.lists.forEach(shop => {
							shop.fullStars = Math.floor(shop.star);
							shop.hasHalfStar = (shop.star % 1) >= 0.1;
							shop.emptyStars = 5 - shop.fullStars - (shop.hasHalfStar ? 1 : 0);
						});
					}
				})
			},
		},
		
	}
</script>
<style>
	.top{
		width: 750rpx;
		height: 524rpx;
		/* background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/top%402x.png') center/cover; */
		position: relative;
		
	}
	.order-nav{
		position: absolute;
		width: 100%;
		width:450rpx;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.nav-span{
		width: 176rpx;
		height: 40rpx;
	}
	.nav-span1{
		width: 236rpx;
		height: 38rpx;
		margin-left: 10rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Rectangle%402x.png') center/cover;
		text-align: center;
		line-height: 38rpx;
		font-size: 22rpx;
		color: #312A28;
	}
	.search{
		width: 100%;
		height: 100%;
		/* border-radius: 82rpx; */
		/* background-color: white; */
	}
	.search-sp{
		width: 100rpx;
		height: 28rpx;
		/* border: 1px red solid; */
		position: absolute;
		z-index: 10;
		line-height: 28rpx;
		border-left: #E8EDE9 1px solid;
		color: #36BE6A;
		font-size: 28rpx;
		top:19rpx;
		text-align: center;
	}
	.box{
		position: absolute;
		width: 708rpx;
		height: 72rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.box1{
		width: 100rpx;
		height: 72rpx;
		/* border: 1rpx red solid; */
		position: absolute;
		z-index: 10;
		top: 0;
		right: 10rpx;
	}
	.swiper-tp{
		width: 690rpx;
		height: 218rpx;
		position: absolute;
		left: 30rpx;
	}
	.tabs{
		width: 750rpx;
		height: 262rpx;
		/* background-color: white; */
		border-radius: 24rpx;
		margin-top: -30rpx;
		position: relative;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Rectangle%201554%402x.png') center/cover;
	}
	.tabs-box{
		width: 100rpx;
		height: 144rpx;
		margin-top:28rpx;
		margin-left: 32rpx;
	}
	.tabs-title{
		width: 100rpx;
		text-align: center;
		font-size: 24rpx;
		color: #858587;
	}
	.sort{
		width: 678rpx;
		margin-left: 32rpx;
		height: 60rpx;
		margin-top: 25rpx;
		display: flex;
		align-items: center;
	}
	.sort1{
		width:122rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		margin-left: 30rpx;
		color: black;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sort1-1{
		width: 100rpx;
		height: 60rpx;
	}
	.sort1-2{
		width: 14rpx;
		height: 8rpx;
	}
	.recommend-list{background-color: unset;box-shadow: unset;padding:20rpx 0rpx}
	.box-card-new{width: 704rpx;background: #FFFFFF;border-radius: 16rpx 16rpx 16rpx 16rpx;margin-top:30rpx;padding: 20rpx;margin-bottom: 16rpx;}
	.shop-list{ margin-top:20rpx;}
	.shop-item{ margin-bottom: 20rpx;background-color: white;padding:20rpx;border-radius: 15rpx;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #EEEEEE;border-radius: unset;}
	.shop-item-img{ display: block;width: 176rpx;height: 176rpx;border-radius: 15rpx;flex-shrink: 0;}
	.shop-item-info{display: flex;flex-direction: column;flex:1;margin-left: 20rpx;}
	.shop-item-info-row{display: flex;align-items: center;justify-content: space-between;}
	.shop-item-title{margin-bottom: 10rpx;color:#333;font-weight: bold;}
	.shop-item-info-distance{font-size: 24rpx;}
	.shop-item-address{margin-top:14rpx;font-size: 24rpx;}
	.pfsp{
		height: 24rpx;
		line-height: 24rpx;
		color: #36BE6A;
	}
	.quan{
		width: 182rpx;
		height: 36rpx;
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #FF6E41;
		text-align: right;
		line-height: 36rpx;
		position: relative;
		
	}
	.quansp{
		position: absolute;
		top:0;
		right: 2rpx;
		
	}
	
	.star{width: 180rpx;height: 24rpx;display: flex;justify-content: space-between;}
</style>